<template>
    <a-form
    ref="formRef"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
    :model="expItems"
  >
    <a-row :gutter="22" style="margin-left: 0px;margin-right: 0px;">
        <a-col :span="22">
            <a-form-item label="数据类型" name="variable_type">
                <a-select
                    ref="select"
                    v-model:value="expItems.variable_type"
                    style="width: 100%"
                >
                    <a-select-option value="0">固定值</a-select-option>
                    <a-select-option value="1">业务字段</a-select-option>
                    <a-select-option value="2">临时变量</a-select-option>
                    <a-select-option value="3">流程数据项</a-select-option>
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="22">
            <a-form-item v-if="expItems.variable_type==='1'" label="表单字段" name="formKey">
                <a-select
                    ref="select"
                    v-model:value="expItems.formKey"
                    style="width: 100%"
                >
                    <a-select-option  
                        v-for="opt in formKeyList"  
                        :key="opt.id"  
                        :value="opt.id"  
                    >  
                        {{ opt.label }}  
                    </a-select-option> 
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="22">
            <a-form-item v-if="expItems.variable_type==='2'" label="临时变量" name="variable">
                <a-select
                    ref="select"
                    v-model:value="expItems.variable"
                    style="width: 100%"
                >
                    <a-select-option  
                        v-for="opt in variableList"  
                        :key="opt.code"  
                        :value="opt.code"  
                    >  
                        {{ opt.name }}  
                    </a-select-option> 
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="22">
            <a-form-item v-if="expItems.variable_type==='3'" label="数据项" name="proceVariable">
                <a-select
                    ref="select"
                    v-model:value="expItems.proceVariable"
                    style="width: 100%"
                >
                    <a-select-option  
                        v-for="opt in proceVariableList"  
                        :key="opt.code"  
                        :value="opt.code"  
                    >  
                        {{ opt.name }}  
                    </a-select-option> 
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="22">
            <a-form-item v-if="expItems.variable_type==='0'" label="值" name="value">
                <a-input v-model:value="expItems.value"></a-input>
            </a-form-item>
        </a-col>
    </a-row>
  </a-form>
  </template>
  <script setup lang="tsx">
     import { ref, reactive, onMounted } from 'vue';
    import {createItemData,byLeaderOptions} from '@/components/setting/subComponents/expItems';
    import {taskAttr} from '@/store/modules/taskAttr';
    import {processInfo} from '@/store/modules/processInfo';
    import { getFormConf } from '@/api/form/index';
    import {handleTree,getFormDataJson,getSubsequentNodes} from '@/utils/common';

    interface Props {
        defaultData?: any;
    }
    const props = withDefaults(defineProps<Props>(), {
        defaultData: [{
            NO: '',
            NAME: '',
            ORG_TYPE: '',
            nodeData:'',
            orgData:[],
            userSubDataType:'',
            userFormKey:'',
        }]
  });
  defineOptions({
    name: 'variableValueSetting',
  });
  const emit = defineEmits(['updateValue']);  
    const expItems = ref({
        variable: '',
        value: '',
        variable_type: '',
        formKey:'',
        proceVariable:'',
    });
    interface State {
        settingData:any;
    }
    const state = reactive<State>({
        settingData:[],
    });
    //节点属性
    const taskAttrStore = taskAttr();
    //流程属性
    const proceStore=processInfo();
    //临时变量
    const variableList=ref<any>([]);
    //表单字段
    const formKeyList=ref<any>([]);
    const proceVariableList=ref<any>([]);
    
    const loadInfo=async()=>{
        variableList.value=proceStore.procVariable[1];
        proceVariableList.value=proceStore.procVariable[0];
        const formConfItemList= await getFormConf({id:proceStore.procInfo.formId});
        if (formConfItemList.result.form_json!=null&&formConfItemList.result.form_json!=''){
            const mapJSON = JSON.parse(formConfItemList.result.form_json);
            formKeyList.value=getFormDataJson(mapJSON.list);
        } 
    }
    loadInfo();
  //点击确认
  const handleSubmit=()=>{
    return expItems
  }
  //上级父页面调用
    defineExpose({
        handleSubmit: handleSubmit,
    });
</script>